<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <div><h1 id="-canvas">认识Canvas</h1>
  <h2 id="labdoc-header-0">一、实验介绍</h2>
  <h3 id="labdoc-header-1">1.1 实验内容</h3>
  <p>Canvas就是一个画布，可以进行画任何的线、图形、填充等一系列的操作，操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图，也提供了三维的绘图，以及图片处理等一系列的api支持。</p><h2 id="labdoc-header-2">二、实验步骤</h2>
  <h3 id="labdoc-header-3">2.1 Canvas的Context对象</h3>
  <ol>
  <li><p>要使用Canvas来绘制图形必须在页面中添加Canvas的标签</p><pre><code class="hljs xml"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demoCanvas"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">width</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">height</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag">&gt;</span></span>
   <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">p</span></span></span><span class="hljs-tag">&gt;</span></span>
     请使用支持HTML5的浏览器查看本实例
   <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">p</span></span></span><span class="hljs-tag">&gt;</span></span>
  <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag">&gt;</span></span>
  </code></pre></li>
  <li><p>只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文（Context）了，Canvas绘制图形都是靠着Canvas对象的上下文对象</p><pre><code class="hljs xml"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript">
   </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//第一步：获取canvas元素</span></span></span><span class="javascript">
   </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> canvasDom = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"demoCanvas"</span></span></span><span class="javascript">);
   </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//第二步：获取上下文</span></span></span><span class="javascript">
   </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> context = canvasDom.getContext(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'2d'</span></span></span><span class="javascript">);
  </span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
  </code></pre></li>
  <li><p>Context上下文默认两种绘制方式：
  第一种：绘制线（stroke）
  第二种：填充（fill）</p></li>
  </ol>
  <h3 id="labdoc-header-4">2.2 Canvas绘制立体透明矩形</h3>
  <h4 id="2-2-1-canvas-">2.2.1 Canvas绘制步骤：</h4>
  <ul>
  <li>创建HTML页面，设置画布标签</li>
  <li>编写js，获取画布dom对象</li>
  <li>通过canvas标签的Dom对象获取上下文</li>
  <li>设置绘制样式、颜色</li>
  <li>绘制矩形，或者填充矩形</li>
  </ul>
  <p>代码如下：</p><pre><code class="hljs xml"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">body</span></span></span><span class="hljs-tag">&gt;</span></span>
      <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demoCanvas"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">width</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">height</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag">&gt;</span></span>
          <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">p</span></span></span><span class="hljs-tag">&gt;</span></span>请使用支持HTML5的浏览器查看本实例<span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">p</span></span></span><span class="hljs-tag">&gt;</span></span>
      <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag">&gt;</span></span>
      <span class="hljs-comment"><span class="hljs-comment">&lt;!---下面将演示一种绘制矩形的demo---&gt;</span></span>
      <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript">
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//第一步：获取canvas元素</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> canvasDom = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"demoCanvas"</span></span></span><span class="javascript">);
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//第二步：获取上下文</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> context = canvasDom.getContext(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">'2d'</span></span></span><span class="javascript">);
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//第三步：指定绘制线样式、颜色</span></span></span><span class="javascript">
          context.strokeStyle = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"red"</span></span></span><span class="javascript">;
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//第四步：绘制矩形，只有线。内容是空的</span></span></span><span class="javascript">
          context.strokeRect(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">10</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">10</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">190</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">100</span></span></span><span class="javascript">);
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//以下演示填充矩形。</span></span></span><span class="javascript">
          context.fillStyle = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"blue"</span></span></span><span class="javascript">;
          context.fillRect(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">110</span></span></span><span class="javascript">,</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">110</span></span></span><span class="javascript">,</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">100</span></span></span><span class="javascript">,</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">100</span></span></span><span class="javascript">);
      </span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
  <span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">body</span></span></span><span class="hljs-tag">&gt;</span></span>
  </code></pre><p>可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。</p><h3 id="labdoc-header-5">2.3 Canvas绘制线条</h3>
  <p>Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法。</p><p>代码如下：</p><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demoCanvas"</span></span></span><span class="hljs-tag"> <span class="hljs-attr">width</span>=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag"> <span class="hljs-attr">height</span>=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"600"</span></span></span><span class="hljs-tag">&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">script</span> </span><span class="hljs-keyword"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span><span class="javascript">
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过id获得当前的Canvas对象</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> canvasDom = <span class="hljs-built_in">document</span></span><span class="hljs-variable"><span class="javascript">.getElementById</span></span><span class="javascript">(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"demoCanvas"</span></span></span><span class="javascript">);
          </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过Canvas Dom对象获取Context的对象</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="javascript"> = canvasDom</span><span class="hljs-variable"><span class="javascript">.getContext</span></span><span class="javascript">(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"2d"</span></span></span><span class="javascript">);
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.beginPath</span></span><span class="javascript">(); </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 开始路径绘制</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.moveTo</span></span><span class="javascript">(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">20</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">20</span></span></span><span class="javascript">); </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置路径起点，坐标为(20,20)</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.lineTo</span></span><span class="javascript">(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">200</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">200</span></span></span><span class="javascript">); </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 绘制一条到(200,20)的直线</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.lineTo</span></span><span class="javascript">(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">400</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">20</span></span></span><span class="javascript">);
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.closePath</span></span><span class="javascript">();
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.lineWidth</span></span><span class="javascript"> = </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">2</span></span></span><span class="hljs-variable"><span class="javascript"><span class="hljs-number">.0</span></span></span><span class="javascript">; </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置线宽</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.strokeStyle</span></span><span class="javascript"> = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"#CC0000"</span></span></span><span class="javascript">; </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置线的颜色</span></span></span><span class="javascript">
          </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.stroke</span></span><span class="javascript">(); </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 进行线的着色，这时整条线才变得可见</span></span></span><span class="javascript">
      </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
  </code></pre><p>可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。</p><h3 id="labdoc-header-6">2.4 Canvas绘制文本</h3>
  <p>Context上下文对象的fillText(string, x, y)方法是用来绘制文本，它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前，需用font设置字体、大小、样式（写法类似与CSS的font属性）。与此类似的还有strokeText方法，用来添加空心字。另外注意一点：fillText方法不支持文本断行，即所有文本出现在一行内。所以，如果要生成多行文本，只有调用多次fillText方法。</p><p>代码如下：</p><pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demoCanvas"</span></span></span><span class="hljs-tag"> <span class="hljs-attr">width</span>=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag"> <span class="hljs-attr">height</span>=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"600"</span></span></span><span class="hljs-tag">&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">script</span> </span><span class="hljs-keyword"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span><span class="javascript">
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过id获得当前的Canvas对象</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> canvasDom = <span class="hljs-built_in">document</span></span><span class="hljs-variable"><span class="javascript">.getElementById</span></span><span class="javascript">(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"demoCanvas"</span></span></span><span class="javascript">);
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过Canvas Dom对象获取Context的对象</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="javascript"> = canvasDom</span><span class="hljs-variable"><span class="javascript">.getContext</span></span><span class="javascript">(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"2d"</span></span></span><span class="javascript">);
      </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.moveTo</span></span><span class="javascript">(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">200</span></span></span><span class="javascript">,</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">200</span></span></span><span class="javascript">);
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置字体</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.font</span></span><span class="javascript"> = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"Bold 50px Arial"</span></span></span><span class="javascript">;
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置对齐方式</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.textAlign</span></span><span class="javascript"> = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"left"</span></span></span><span class="javascript">;
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置填充颜色</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.fillStyle</span></span><span class="javascript"> = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"#005600"</span></span></span><span class="javascript">;
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 设置字体内容，以及在画布上的位置</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.fillText</span></span><span class="javascript">(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"老马!"</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">10</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">50</span></span></span><span class="javascript">);
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">// 绘制空心字</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript">context</span></span><span class="hljs-variable"><span class="javascript">.strokeText</span></span><span class="javascript">(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"blog.itjeek.com!"</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">10</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">100</span></span></span><span class="javascript">);
  </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  </code></pre><h3 id="labdoc-header-7">2.5 Canvas绘制圆形和椭圆</h3>
  <p>Context上下文的arc方法就是绘制圆形或者椭圆，arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）。</p><p>代码如下：</p><pre><code class="hljs xml"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demoCanvas"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">width</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">height</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"600"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag">&gt;</span></span>
  <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript">
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过id获得当前的Canvas对象</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> canvasDom = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"demoCanvas"</span></span></span><span class="javascript">);
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过Canvas Dom对象获取Context的对象</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> context = canvasDom.getContext(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"2d"</span></span></span><span class="javascript">);
      context.beginPath();</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//开始绘制路径</span></span></span><span class="javascript">
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。</span></span></span><span class="javascript">
      context.arc(</span><span class="hljs-number"><span class="javascript"><span class="hljs-number">60</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">60</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">50</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">0</span></span></span><span class="javascript">, </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">Math</span></span></span><span class="javascript">.PI * </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">2</span></span></span><span class="javascript">, </span><span class="hljs-literal"><span class="javascript"><span class="hljs-literal">true</span></span></span><span class="javascript">);
      context.lineWidth = </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">2.0</span></span></span><span class="javascript">;</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//线的宽度</span></span></span><span class="javascript">
      context.strokeStyle = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"#000"</span></span></span><span class="javascript">;</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//线的样式</span></span></span><span class="javascript">
      context.stroke();</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//绘制空心的，当然如果使用fill那就是填充了。</span></span></span><span class="javascript">
  </span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
  </code></pre><p>可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。</p><h3 id="labdoc-header-8">2.6 Canvas绘制图片</h3>
  <p>Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API，让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片，并且做出一个立体效果出来。</p><p>代码如下：</p><pre><code class="hljs xml"><span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">id</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"demoCanvas"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">width</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"500"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">height</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"600"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">canvas</span></span></span><span class="hljs-tag">&gt;</span></span>
  <span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr"><span class="hljs-tag"><span class="hljs-attr">type</span></span></span><span class="hljs-tag">=</span><span class="hljs-string"><span class="hljs-tag"><span class="hljs-string">"text/javascript"</span></span></span><span class="hljs-tag">&gt;</span></span><span class="javascript"><span class="javascript">
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过id获得当前的Canvas对象</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> canvasDom = </span><span class="hljs-built_in"><span class="javascript"><span class="hljs-built_in">document</span></span></span><span class="javascript">.getElementById(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"demoCanvas"</span></span></span><span class="javascript">);
      </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//通过Canvas Dom对象获取Context的对象</span></span></span><span class="javascript">
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> context = canvasDom.getContext(</span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"2d"</span></span></span><span class="javascript">);
      </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> image = </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">new</span></span></span><span class="javascript"> Image();</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//创建一张图片</span></span></span><span class="javascript">
      image.src = </span><span class="hljs-string"><span class="javascript"><span class="hljs-string">"Images/a.png"</span></span></span><span class="javascript">;</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//设置图片的路径</span></span></span><span class="javascript">
      image.onload = </span><span class="hljs-function"><span class="hljs-keyword"><span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span></span><span class="javascript"><span class="hljs-function">(</span></span><span class="hljs-params"></span><span class="javascript"><span class="hljs-function"><span class="hljs-params"></span>) </span></span></span><span class="javascript">{</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//当图片加载完成后</span></span></span><span class="javascript">
       </span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">for</span></span></span><span class="javascript"> (</span><span class="hljs-keyword"><span class="javascript"><span class="hljs-keyword">var</span></span></span><span class="javascript"> i = </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">0</span></span></span><span class="javascript">; i &lt; </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">10</span></span></span><span class="javascript">; i++) {</span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//输出10张照片</span></span></span><span class="javascript">
              </span><span class="hljs-comment"><span class="javascript"><span class="hljs-comment">//参数：（1）绘制的图片  （2）坐标x，（3）坐标y</span></span></span><span class="javascript">
              context.drawImage(image, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">100</span></span></span><span class="javascript"> + i * </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">80</span></span></span><span class="javascript">, </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">100</span></span></span><span class="javascript"> + i * </span><span class="hljs-number"><span class="javascript"><span class="hljs-number">80</span></span></span><span class="javascript">);
          }
      };
  </span></span><span class="hljs-tag"><span class="hljs-tag">&lt;/</span><span class="hljs-name"><span class="hljs-tag"><span class="hljs-name">script</span></span></span><span class="hljs-tag">&gt;</span></span>
  </code></pre><p>可以使用GVim按照上述代码编写，并用Firefox浏览器打开编写的html文件查看效果。</p><h2 id="labdoc-header-9">三、实验总结</h2>
  <p>Canvas总算介绍了最基本的用法了。当然本文大量借鉴了其他网站的例子。作者也是把最基本的精华部分罗列了一下。总体来说Canvas绘制图片和文本、形状都不是很难，API代码上手难度基本就是初级。但是由此而带来的非常多的可能，让Html5真正的强大到无可比拟的地步。</p><p>当然本文并没有涉及到Canvas3D绘制的相关内容，而且关于Canvas绘制渐变色、绘制阴影、图片的相关处理操作等，这些内容，如果读者确实需要的可以自行搜索查找相关资料或者直接阅读Html5的最新标准文档。</p></div>
</body>
</html>